import axios from 'axios';
import React, { useEffect, useMemo, useState } from 'react'

export default function App() {
  const [text, settext] = useState('');
  const [list, setlist] = useState([]);
  useEffect(()=>{
    axios({
      url:'https://m.maizuo.com/gateway?cityId=440300&ticketFlag=1&k=3293880',
      headers:{
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"165294070798642513887233","bc":"110100"}',
        'X-Host': 'mall.film-ticket.cinema.list'
      }
    }).then(res => {
      setlist(res.data.data.cinemas);
    })
  },[])
  
  var datalist = useMemo(()=>{   //相当于Vue中的computed
    return list.filter(item => item.name.toUpperCase().includes(text.toUpperCase())||item.address.toUpperCase().includes(text.toUpperCase())
  )},[list,text]);

  let handleChange = (evt) =>{
    console.log(text)
    settext(evt.target.value);
  }
  return (
    <div>
      <input onChange={handleChange}></input>
      <ul>
      {datalist.map(item =>
        <li>{item.name}</li>)}
      </ul>
    </div>
  )
}
